<template>
  <div id="screen-wrap">
    <div class="screen-content">
      <PHeader @changeMode="emit('changeMode')" />
      <slot />
    </div>
  </div>
</template>

<script setup name="ScreenLayout">
import autofit from 'autofit.js'
import PHeader from '@/components/PHeader.vue'

import { emitter } from '@/utils/EventBus.js'

const emit = defineEmits(['changeMode'])

const isCollapse = ref(false)

onMounted(() => {
  autofit.init({
    ignore: ['.map-box'],
    dw: 1920,
    dh: 1080,
    el: '#screen-wrap',
    resize: true
  }, false)
  nextTick(() => {
    // console.log(bus)
    emitter.emit('resetChart')
  })
})
</script>

<style lang="scss" scoped>
#screen-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
.screen-content {
  width: 1920px;
  height: 1080px;
  color: #fff;
  position: relative;
  background-image: url('@/assets/images/bg@2x.png');
  background-size: 100% 100%;
  background-color: #101129;
}
</style>
